﻿@{
    Layout = "_Layout";
}
<div id="app" style="position:relative">
    <div class="header">
        <div>
            <el-button icon="el-icon-back" v-on:click="back">返回</el-button>
        </div>
       
        <div style="padding-right:30px;">
            <el-button v-on:click="save">保存</el-button>
            <el-button type="primary" v-on:click="submit">提交</el-button>
        </div>
    </div>
    <!--基本信息-->
    <div class="inner-container" style="margin-top:70px;">
        <el-divider content-position="left">基本信息</el-divider>
        <el-form :model="evaluation" :label-width="formLabelWidth" ref="evalForm" :rules="validateRules">
            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="evaluation.name" autocomplete="off" clearable></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="费用">
                            <el-select v-model="evaluation.isFree" placeholder="">
                                <el-option :key="1" label="免费" :value="true">
                                </el-option>
                                <el-option :key="2" label="收费" :value="false">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="价格">
                            <el-input v-model="evaluation.normalPrice" autocomplete="off"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="白银会员价">
                            <el-input type="number" v-model="evaluation.silverPrice" autocomplete="off"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="黄金会员价">
                            <el-input type="number" v-model="evaluation.goldPrice" autocomplete="off"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="钻石会员价">
                            <el-input type="number" v-model="evaluation.diamondPrice" autocomplete="off"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="所需时间">
                            <el-input type="number" v-model="evaluation.lastTime" autocomplete="off"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="状态">
                            <el-select v-model="evaluation.status" placeholder="" :disabled="evaluation.status===0">
                                <el-option :key="1" label="已创建" :value="0" v-show="evaluation.status===0" >
                                </el-option>
                                <el-option :key="2" label="使用中" :value="1">
                                </el-option>
                                <el-option :key="3" label="已禁用" :value="2">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="活动">
                            <el-switch v-model="isActive"
                                       active-color="#13ce66"
                                       inactive-color="#ff4949"
                                       v-on:change="isActiveChange">
                            </el-switch>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="测试简介">
                            <el-input type="textarea" :autosize="{minRows:2,maxRow:6}" v-model="evaluation.introduction" autocomplete="off" clearable placeholder="请输入测试简介">
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <!--图片管理-->
    <div class="inner-container">
        <el-divider content-position="left">图片管理</el-divider>
        <el-form>
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="列表图">
                            <el-upload class="upload-demo"
                                       :action="listUploadUrl"
                                       :on-preview="handlePreview"
                                       :on-remove="listImageRemove"
                                       :on-success="listImageSuccess"
                                       :multiple="false"
                                       :limit=1
                                       :file-list="listImageList"
                                       list-type="picture">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="主图(轮播)">
                            <el-upload class="upload-demo"
                                       :action="mainUploadUrl"
                                       :on-preview="handlePreview"
                                       :on-remove="mainImageRemove"
                                       :on-success="mainImageSuccess"
                                       :multiple="false"
                                       :limit=1
                                       :file-list="mainImageList"
                                       list-type="picture">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="详情图">
                            <el-upload class="upload-demo"
                                       :action="detailUploadUrl"
                                       :on-preview="handlePreview"
                                       :on-remove="detaiImagesRemove"
                                       :file-list="detailImageList"
                                       :on-success="detailImagesSuccess"
                                       list-type="picture"
                                       :multiple="false">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <!--参与规则-->
    <div class="inner-container">
        <el-divider content-position="left">参与规则</el-divider>
        <el-row style="margin-bottom:10px;">
            <el-col :span="8" :offset="16">
                <div class="grid-content bg-purple-dark" style="display:flex;justify-content:flex-end;align-items:center;">
                    <el-button type="primary" icon="el-icon-plus" plain v-on:click="selectRules">添加规则</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row style="display:flex;justify-content:center;">
            <div style="width:70%;border:0.11px solid #DCDFE6">
                <el-table :data="evalRules" style="width:100%">
                    <el-table-column type="index" width="50" label="编号">

                    </el-table-column>
                    <el-table-column label="名称" width="400" property="name">

                    </el-table-column>
                    <el-table-column label="类型" width="100" property="ruleType">
                        <template slot-scope="scope">
                            <span v-if="scope.row.ruleType===0">会员等级</span>
                            <span v-else-if="scope.row.tuleType===1">微信分享量</span>
                            <span v-else>抖音分享量</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="会员等级" width="120" property="wxShareCount">
                        <template slot-scope="scope">
                            <div v-if="scope.row.ruleType===0">    
                                <span v-if="scope.row.memberLevel===0">普通会员</span>
                                <span v-else-if="scope.row.memberLevel===1" style="color:#606266">白银会员</span>
                                <span v-else-if="scope.row.memberLevel===2" style="color:#E6A23C">黄金会员</span>
                                <span v-else style="color:#409EFF">钻石会员</span>
                            </div>
                            <div v-else>
                                <span>----</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="微信分享量" width="120">
                        <template slot-scope="scope">
                            <span v-if="scope.row.ruleType===1">{{scope.row.wxShareCount}}</span>
                            <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="抖音分享量" width="120">
                        <template slot-scope="scope">
                            <span v-if="scope.row.ruleType===2">{{scope.row.wxShareCount}}</span>
                            <span v-else>----</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-row>
    </div>
    <!--测试内容管理-->
    <div class="inner-container" style="margin-bottom:100px;">
        <el-divider content-position="left">测评内容</el-divider>
        <el-row style="margin-bottom:10px;">
            <el-col :span="8" :offset="16">
                <div class="grid-content bg-purple-dark" style="display:flex;justify-content:flex-end;align-items:center;">
                    <el-button type="primary" icon="el-icon-plus" plain v-on:click="showAddEvalPart">添加模块</el-button>
                </div>
            </el-col>
        </el-row>
        <div v-if="evaluationParts.length>0" style="width:100%">
            <!--展示模块tabs-->
            <el-tabs v-model="selectedTabName" tab-position="left" class="eval-parts-tabs">
                <el-tab-pane :key="item.name+item.order+item.content"
                             v-for="(item, index) in evaluationParts"
                             :label="item.name"
                             :name="String(item.id)">
                    <!--自定义组件，用于展示模块及其内容的自定义组件-->
                    <eval-part-component v-bind:id="item.id" v-on:delete-part="deletePart" v-on:edit-part="showEditEvalPart"></eval-part-component>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div v-else class="no-evaluation-parts">
            <span>无测试内容！</span>
        </div>
    </div>
    <!--图片预览对话框-->
    <el-dialog :title="dialogTitle" :visible.sync="imageDialogVisible" width="500px" :close-on-click-modal="false">
        <el-image style="width: 100%; height:500px;"
                  :src="previewUrl"
                  fit="contain">
        </el-image>
    </el-dialog>

    <!--模块创建对话框-->
    <el-dialog :title="partDialogTitle" :visible="partDialogVisble" :close-on-click-modal="false" v-on:close="closePart" width="500px">
        <el-form :model="evalPart" label-width="60px" ref="evalPartForm" :rules="partRules">
            <el-row>
                <el-col :span="12">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="排序" prop="order">
                            <el-input v-model="evalPart.order" type="number" autocomplete="off"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="evalPart.name" autocomplete="off" clearable></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="描述" prop="content">
                            <el-input type="textarea" :autosize="{minRows:2,maxRow:6}" v-model="evalPart.content" autocomplete="off" clearable placeholder="请输入模块描述">
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <!--一个表格，用于展示有模块中的问题-->
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button v-on:click="closePart">取 消</el-button>
            <el-button type="primary" v-on:click="savePart">保存</el-button>
        </div>
    </el-dialog>

    <!--编辑规则对话框-->
    <el-dialog :title="ruleDialogTitle" :visible="ruleDialogVisble" :close-on-click-modal="false" v-on:close="ruleDialogVisble=false" width="1000px">
        <el-form  label-width="60px" >
            <el-row>
                <el-table :data="insRules" style="width:100%">
                    <el-table-column type="index" width="50" label="编号">

                    </el-table-column>
                    <el-table-column label="名称" width="350" property="name">

                    </el-table-column>
                    <el-table-column label="类型" width="100" property="ruleType">
                        <template slot-scope="scope">
                            <span v-if="scope.row.ruleType===0">会员等级</span>
                            <span v-else-if="scope.row.tuleType===1">微信分享量</span>
                            <span v-else>抖音分享量</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="会员等级" width="120" property="wxShareCount">
                        <template slot-scope="scope">
                            <div v-if="scope.row.ruleType===0">
                                <span v-if="scope.row.memberLevel===0">普通会员</span>
                                <span v-else-if="scope.row.memberLevel===1" style="color:#606266">白银会员</span>
                                <span v-else-if="scope.row.memberLevel===2" style="color:#E6A23C">黄金会员</span>
                                <span v-else style="color:#409EFF">钻石会员</span>
                            </div>
                            <div v-else>
                                <span>----</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="微信分享量" width="120">
                        <template slot-scope="scope">
                            <span v-if="scope.row.ruleType===1">{{scope.row.wxShareCount}}</span>
                            <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="抖音分享量" width="120">
                        <template slot-scope="scope">
                            <span v-if="scope.row.ruleType===2">{{scope.row.wxShareCount}}</span>
                            <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.isIn" size="mini" icon="el-icon-delete" type="danger" v-on:click="removeRuleFromEval(scope.row)">移出</el-button>
                            <el-button v-else size="mini" icon="el-icon-plus" v-on:click="addRuleToEval( scope.row)">加入</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </el-form>
    </el-dialog>
</div>

<!--X-Template 组件模板-->
<!--选项模板-->
<script type="text/x-template" id="options-component-template">
    <!--单选题-->
    <div class="option-container" >
        <div v-if="optionQuestionType===0" class="option">
             <span class="option-label">{{optionLabel}}</span>
            <el-radio v-model="value" v-bind:label="id"  >{{context}}</el-radio>
        </div>
        <!--多选题-->
        <div v-else-if="optionQuestionType===1" class="option-multi" >
             <span class="option-label">{{optionLabel}}</span>
             <el-checkbox v-model="checked"   >{{context}}</el-checkbox>
        </div>
    </div>
</script>

<!--测试题模板-->
<script type="text/x-template" id="question-compoent-template">
    <div class="question-inner-container">
        <el-row style="display:flex;align-items:center">
                <el-col :span="1">
                    <div class="quesiton-number" >
                        <span>
                            {{number}}
                        </span>
                    </div>
                </el-col>
                <el-col :span="19">
                    <div class="question-content-row">
                    {{content}} （{{score}}分）
                    </div>
                </el-col>
                <el-col :span="4"  >
                      <div class="grid-content bg-purple-dark" style="display:flex;align-items:center;justify-content:flex-end;">
                          <el-button type="info" icon="el-icon-plus" circle v-on:click="showAddOption"></el-button>
                          <el-button type="primary" icon="el-icon-edit" circle v-on:click="editQuestion"></el-button>
                          <el-button type="danger" icon="el-icon-delete" circle v-on:click="deleteQuestion"></el-button>
                      </div>
                </el-col>
        </el-row>
        <!--测试题-->
        <el-row  style="margin-top:5px;padding-left:35px;line-height:1.3;">
            <el-col :span="6" v-for="item in options" :key="item.id"  class="">
                <option-component v-bind:optionId="item.id"
                                 v-bind:context="item.context"
                                 v-bind:questionType="questionType"
                                 v-bind:label="item.label"
                                 v-bind:result="result"
                                 v-on:delete-option="deleteOption"
                                 v-on:edit-option="showEditOption">
                </option-component>
            </el-col>
        </el-row>
        <!--主观题-->
        <el-row v-if="questionType===2" style="padding-left:35px;">
                <el-input type="textarea"
                          :rows="2"
                          placeholder="请输入内容"
                          disabled
                >
                </el-input>
        </el-row>
        <!--选项编辑对话框-->
        <el-dialog :title="optionDialogTitle" :visible.sync="optionDialogVisible" width="500px" v-on:close="closeOption" :close-on-click-modal="false">
            <el-form :model="option" :label-width="formLabelWidth" ref="optionForm" :rules="optionRules">
                <el-row>
                     <el-col :span="24">
                         <div class="grid-content bg-purple-dark">
                            <el-form-item label="编号">
                                 <el-select v-model="option.label" placeholder="选择编号"  >
                                        <el-option :key="0" label="A" :value="0">
                                        </el-option>
                                        <el-option :key="1" label="B" :value="1">
                                        </el-option>
                                        <el-option :key="2" label="C" :value="2">
                                        </el-option>
                                        <el-option :key="3" label="D" :value="3">
                                        </el-option>
                                        <el-option :key="4" label="E" :value="4">
                                        </el-option>
                                        <el-option :key="5" label="F" :value="5">
                                        </el-option>
                                         <el-option :key="6" label="G" :value="6">
                                        </el-option>
                                         <el-option :key="7" label="H" :value="7">
                                        </el-option>
                                         <el-option :key="8" label="I" :value="8">
                                        </el-option>
                                         <el-option :key="9" label="J" :value="9">
                                        </el-option>
                                         <el-option :key="10" label="K" :value="10">
                                        </el-option>
                                    </el-select>
                            </el-form-item>
                        </div>
                     </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                         <div class="grid-content bg-purple-dark">
                            <el-form-item label="内容" prop="context">
                                <el-input v-model="option.context" type="textarea" autocomplete="off"></el-input>
                            </el-form-item>
                        </div>
                     </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-on:click="closeOption">取 消</el-button>
                <el-button type="primary" v-on:click="saveOption">保存</el-button>
            </div>
        </el-dialog>
    </div>
</script>
<!--测评模块模板-->
<script type="text/x-template" id="eval-part-component-template">
    <div class="eval-part">
        <el-form   ref="partForm" class="part-form" :rules="questionRules">
            <div class="part-title-main">
                 <el-row class="part-title-contianer">
                    <div class="part-title">
                        <span class="part-order">{{order}}</span> &nbsp;&nbsp;&nbsp;<span class="part-name">{{ name }}</span>
                    </div>
                </el-row>
                <el-row>
                    <div class="part-content">
                        <span>{{ content }}</span>
                    </div>
                </el-row>
            </div>

            <!--测试题列表容器-->
            <div class="questions-container">
                <!--工具栏-->
                <el-row >
                    <el-col :span="8" :offset="16">
                        <div class="grid-content bg-purple-dark" style="display:flex;justify-content:flex-end;align-items:center;">
                                <el-button type="primary" icon="el-icon-plus" plain v-on:click="showAddQuestion" style="margin-right:20px">添加测试题</el-button>
                                <el-button type="primary" icon="el-icon-edit"   v-on:click="editPart" style="margin-right:20px">修改模块</el-button>
                                <el-button type="danger" icon="el-icon-delete"  plain v-on:click="deletePart" style="margin-right:20px">删除模块</el-button>
                        </div>
                    </el-col>
                </el-row>
                <!--测试题列表-->
                <div class="questions-list">
                        <div v-if="questions.length > 0" class="eval-part-questions">
                                <question-component
                                        v-for="item in questions"
                                        :key="item.id+item.number+item.content+item.score+item.optionIds+item.resultIds"
                                        :questionId="item.id"
                                        v-on:edit-question="showEditQuestionComponent"
                                        v-on:delete-question="deleteQuestion">
                                </question-component>
                        </div>
                        <div v-else class="no-question-container">
                                <span class="no-question-span">暂无测试题！</span>
                        </div>
                </div>
            </div>
        </el-form>

         <!--问题编辑对话框-->
        <el-dialog :title="questionDialogTitle" :visible.sync="questionDialogVisible" width="800px" height="600px" v-on:close="closeQuestion" :close-on-click-modal="false">
            <el-form :model="question" :label-width="questionDialogLabelWidth" ref="questionForm" :rules="questionRules">
                <!--问题内容-->
                <el-row>
                    <!--编号-->
                    <el-col :span="8">
                         <div class="grid-content bg-purple-dark">
                            <el-form-item label="编号" prop="number">
                                <el-input v-model="question.number" type="number"  autocomplete="off"></el-input>
                            </el-form-item>
                        </div>
                     </el-col>
                     <!--问题类型-->
                     <el-col :span="8">
                          <div class="grid-content bg-purple-dark">
                                 <el-form-item label="类型">
                                    <el-select v-model="question.questionType" v-on:change="questionTypeChangeHandler" placeholder="选择问题类型" :disabled="question.id !==null" >
                                        <el-option :key="0" label="单选题" :value="0">
                                        </el-option>
                                        <el-option :key="1" label="多选题" :value="1">
                                        </el-option>
                                        <el-option :key="2" label="问答题" :value="2">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                          </div>
                     </el-col>
                     <!--分数-->
                      <el-col :span="8">
                         <div class="grid-content bg-purple-dark">
                            <el-form-item label="分数" prop="score">
                                <el-input v-model="question.score" type="number" autocomplete="off"></el-input>
                            </el-form-item>
                        </div>
                     </el-col>
                </el-row>
                <!--文字内容-->
                <el-row>
                     <el-col :span="24">
                          <div class="grid-content bg-purple-dark">
                              <el-form-item label="内容" prop="content">
                                  <el-input type="textarea" :rows="1" placeholder="请输入文字内容" v-model="question.content">
                                  </el-input>
                              </el-form-item>
                          </div>
                     </el-col>
                </el-row>
                <!--测试题答案-->
                <el-row v-if="question.questionType !==2 && question.id" >
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                                 <el-form-item label="答案">
                                    <!--questionType ===1(多选题)时，开启多选-->
                                    <el-select style="width:100%" v-model="question.resultField" :multiple="question.questionType===1" v-on:change="resultChangeHandler" placeholder="选择问题答案" >
                                        <el-option v-for="item in question.options" :key="item.id" :label="optionLabel(item.label)+item.context" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                         </div>
                    </el-col>
                </el-row>

                <!--选项列表 -->
                <el-row  class="option-row" v-if="question.questionType!==2 && question.id">
                    <div class="add-option-button-container">
                        <el-button type="primary" icon="el-icon-plus" plain v-on:click="showAddOptionDialog" style="margin-right:20px">添加选项</el-button>
                    </div>
                    <div class="table-container" >
                        <el-table :data="question.options" style="width:100%" height="250">
                            <el-table-column  width="50" label="编号" >
                                <template slot-scope="scope">
                                    <span v-if="scope.row.label===0">A</span>
                                    <span v-if="scope.row.label===1">B</span>
                                    <span v-if="scope.row.label===2">C</span>
                                    <span v-if="scope.row.label===3">D</span>
                                    <span v-if="scope.row.label===4">E</span>
                                    <span v-if="scope.row.label===5">F</span>
                                    <span v-if="scope.row.label===6">G</span>
                                    <span v-if="scope.row.label===7">H</span>
                                    <span v-if="scope.row.label===8">I</span>
                                    <span v-if="scope.row.label===9">J</span>
                                    <span v-if="scope.row.label===10">K</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="内容" width="300" property="context">
                            </el-table-column>
                            <el-table-column label="创建时间" width="200">
                                <!--注意此处 scope-slot的使用方法-->
                                <template slot-scope="scope">
                                    <i class="el-icon-time"></i>
                                    <span style="margin-left: 10px">{{ scope.row.createdTime }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" v-on:click="showEditOptionTable(scope.$index, scope.row)">编辑</el-button>
                                    <el-button size="mini" type="danger" v-on:click="deleteOptionTable(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-row>
                <!--排序编号-->
                <!--表格(显示其中的选项)-->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-on:click="closeQuestion">取 消</el-button>
                <el-button type="primary" v-on:click="saveQuestion" v-if="question.id" >保存</el-button>
                <el-button type="primary" v-on:click="saveQuestion" v-if="!question.id" >创建</el-button>
            </div>
        </el-dialog>

         <!--选项编辑对话框-->
        <el-dialog :title="optionDialogTitle" :visible.sync="optionDialogVisible" width="500px" v-on:close="closeOption" :close-on-click-modal="false">
            <el-form :model="option" :label-width="optionDialogLabelWidth" ref="optionForm" :rules="optionRules">
                <el-row>
                     <el-col :span="24">
                         <div class="grid-content bg-purple-dark">
                            <el-form-item label="编号">
                                 <el-select v-model="option.label" placeholder="选择编号"  >
                                        <el-option :key="0" label="A" :value="0">
                                        </el-option>
                                        <el-option :key="1" label="B" :value="1">
                                        </el-option>
                                        <el-option :key="2" label="C" :value="2">
                                        </el-option>
                                        <el-option :key="3" label="D" :value="3">
                                        </el-option>
                                        <el-option :key="4" label="E" :value="4">
                                        </el-option>
                                        <el-option :key="5" label="F" :value="5">
                                        </el-option>
                                         <el-option :key="6" label="G" :value="6">
                                        </el-option>
                                         <el-option :key="7" label="H" :value="7">
                                        </el-option>
                                         <el-option :key="8" label="I" :value="8">
                                        </el-option>
                                         <el-option :key="9" label="J" :value="9">
                                        </el-option>
                                         <el-option :key="10" label="K" :value="10">
                                        </el-option>
                                    </el-select>
                            </el-form-item>
                        </div>
                     </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                         <div class="grid-content bg-purple-dark">
                            <el-form-item label="内容" prop="context">
                                <el-input v-model="option.context" type="textarea" autocomplete="off"></el-input>
                            </el-form-item>
                        </div>
                     </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-on:click="closeOption">取 消</el-button>
                <el-button type="primary" v-on:click="saveOption">保存</el-button>
            </div>
        </el-dialog>
    </div>
</script>

<script>
    // 选项组件
    var OptionComponent = {
        props: {
            optionId: Number,
            context: String,
            questionType: Number,
            questionId:Number,
            label: Number,
            result: Array
        },
        // 数据对象
        data: function () {
            return {
                id: null,
                queId:null,
                optionContext: '',
                optionQuestionType: 0,
                optionLabel: null,
                btnVisible: false,
                value: 'adad',
                checked:false
            }
        },
        template: '#options-component-template',
        methods: {
            // 删除选项
            deleteOption() {
                let cvm = this;
                // 触发自定义事件
                cvm.$emit('delete-option', cvm.id)
            },
            // 修改选项
            editOption() {
                let cvm = this;
                // 触发自定义事件
                cvm.$emit('eidt-option', cvm.id)
            },
            judgeSelect(){ 
                let cvm = this;
                // 单选题
                if (cvm.$props.result && cvm.$props.result.length>0 && cvm.optionQuestionType === 0) {
                    cvm.value = cvm.$props.result[0].id;
                }
                // 多选题
                else if (cvm.$props.result && cvm.$props.result.length>0 && cvm.optionQuestionType === 1) {
                    cvm.$props.result.forEach(item => {
                        if (item.id == cvm.id) {
                            cvm.checked = true;
                        }
                    });
                }
            },
            inResultChange() {
                
            }
        },
        // 创建钩子
        created() {
            let cvm = this;
            cvm.id = cvm.$props.optionId;
            cvm.optionContext = cvm.$props.context;
            cvm.optionQuestionType = cvm.$props.questionType;
            cvm.optionLabel = cvm.$props.label;
            cvm.queId = cvm.$props.questionId;
            cvm.judgeSelect();
            switch (cvm.$props.label) {
                case 0:
                    cvm.optionLabel = 'A.';
                    break;
                case 1:
                    cvm.optionLabel = 'B.';
                    break;
                case 2:
                    cvm.optionLabel = 'C.';
                    break;
                case 3:
                    cvm.optionLabel = 'D.';
                    break;
                case 4:
                    cvm.optionLabel = 'E.';
                    break;
                case 5:
                    cvm.optionLabel = 'F.';
                    break;
                case 6:
                    cvm.optionLabel = 'G.';
                    break;
                case 7:
                    cvm.optionLabel = 'H.';
                    break;
                default:
                    break;
            }
        }
    };

    // 测试题组件
    var QuestionComponent = {
        props: {
            questionId: Number
        },
        components: {
            'option-component': OptionComponent
        },
        // 数据对象
        data: function () {
            return {
                id: null,
                number: null,
                content: null,
                evaluationPart: null,
                questionType: null,
                options: [],
                score: null,
                order: null,
                result: [],


                formLabelWidth: '100px',


                optionDialogTitle: null,
                optionDialogVisible: false,

                option: {
                    id: null,
                    questionId: null,
                    context: null,
                    label: null
                },
                // 选项表单验证规则
                optionRules: {
                    context: [
                        { type: 'string', required: true, message: '请输入选项内容', trigger: 'blur' }
                    ]
                }
            }
        },
        template: '#question-compoent-template',
        methods: {
            // 加载测试题
            loadQuestion() {
                let cvm = this;
                axios.get(`/api/evaluation/get-question?Id=${cvm.id}`)
                    .then((res) => {
                        if (res.data.code === 0) {
                            let question = res.data.data;
                            // 数据映射
                            cvm.id = question.id;
                            cvm.number = question.number;
                            cvm.content = question.content;
                            cvm.evaluationPart = question.evaluationPart.id;
                            cvm.options = question.options;
                            cvm.optionIds = question.optionIds;
                            cvm.score = question.score;
                            cvm.order = question.order;
                            cvm.result = question.result;
                            cvm.questionType = question.questionType;
                        }
                    });
            },
            // 编辑测试题
            editQuestion() {
                let cvm = this;
                cvm.$emit('edit-question', cvm.id);
            },

            // 删除测试题
            deleteQuestion() {
                let cvm = this;
                cvm.$emit('delete-question', cvm.id);
            },

            // 加载测试题选项集合
            loadOptions() {
                let cvm = this;
                return new Promise((resolove) => {
                    axios.get(`/api/evaluation/get-question-options?questionId=${cvm.id}`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                cvm.options = res.data.data;
                                resolove();
                            }
                            else {
                                cvm.$message({
                                    message: res.data.msg,
                                    type: 'error',
                                    customClass: 'evaluation-message'
                                });
                            }
                        });
                });
            },

            // 生成选项label
            generateLabel() {
                let cvm = this;
                return new Promise((resolve) => {
                    axios.get(`/api/evaluation/generate-label?questionId=${cvm.id}`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                cvm.option.label = res.data.data;
                                resolve();
                            }
                            else {
                                cvm.$message({
                                    message: res.data.msg,
                                    type: 'error',
                                    customClass: 'evaluation-message'
                                })
                            }
                        });
                });
            },

            // 打开新建选项
            showAddOption() {
                let cvm = this;
                cvm.setOptionEmpty()
                    .then(() => {
                        // 生成选项
                        cvm.option.questionId = cvm.id;
                        cvm.generateLabel().then(() => {
                            cvm.optionDialogTitle = '创建选项';
                            cvm.optionDialogVisible = true;
                        })
                    });
            },

            // 打开选项编辑
            showEditOption(id) {
                let cvm = this;
                cvm.loadOption(id).then((res) => {
                    cvm.optionDialogTitle = '编辑选项';
                    cvm.optionDialogVisible = true;
                })
            },

            // 保存选项
            saveOption() {
                let cvm = this;
                cvm.$refs['optionForm'].validate((valid) => {
                    if (valid) {
                        axios.post(`/api/evaluation/save-option`, cvm.option)
                            .then((res) => {
                                if (res.data.code === 0) {
                                    cvm.loadOptions().then(() => {
                                        cvm.$message({
                                            message: res.data.msg,
                                            type: 'success',
                                            customClass: 'evaluation-message'
                                        });
                                        cvm.closeOption();
                                    })
                                }
                                else {
                                    cvm.$message({
                                        message: res.data.msg,
                                        type: 'error',
                                        customClass: 'evaluation-message'
                                    });
                                    cvm.closeOption();
                                }
                            });
                    }
                })
            },

            // 加载单个选项
            loadOption(id) {
                let cvm = this;
                return new Promise((resolve) => {
                    axios.get(`/api/evaluation/get-option?id=${id}`)
                        .then((res) => {
                            if (res.data === 0) {
                                cvm.option = res.data.data;
                                resolve();
                            }
                        });
                })
            },

            // 删除选项
            deleteOption(id) {
                let cvm = this;
                axios.get(`/api/evaluation/delete-option?id=${id}`)
                    .then((res) => {
                        if (res.data.code === 0) {
                            cvm.$message({
                                message: res.data.msg,
                                type: 'success',
                                customClass: 'evaluation-message'
                            });
                            cvm.loadOptions();
                        }
                        else {
                            cvm.$message({
                                message: res.data.msg,
                                type: 'error',
                                customClass: 'evaluation-message'
                            });
                        }
                    })


            },

            // 关闭选项编辑对话框
            closeOption() {
                let cvm = this;
                cvm.setOptionEmpty().then(() => {
                    cvm.$refs['optionForm'].resetFields();
                    cvm.optionDialogVisible = false;
                })
            },

            // option置空
            setOptionEmpty() {
                let vm = this;
                return new Promise((resolve) => {
                    for (var key in vm.option) {
                        vm.option[key] = null;
                    }
                    resolve();
                });
            },
        },
        created() {
            let cvm = this;
            cvm.id = cvm.$props.questionId;

            // 加载
            cvm.loadQuestion();
        }
    }

    // 声明测试模块组件
    var EvalPartComponent = {
        props: {
            partId: Number
        },
        template: '#eval-part-component-template',
        components: {
            'question-component': QuestionComponent,
            'option-component': OptionComponent
        },
        // 数据对象
        data: function () {
            return {
                id: null,
                order: null,
                name: null,
                content: null,
                questions: [

                ],
                evaluation: null,
                questionDialogLabelWidth: '50px',
                // 当前编辑的问题
                question: {
                    id: null,
                    number: null,
                    content: null,
                    evaluationPart: null,
                    questionType: null,
                    options: [],
                    score: 1,
                    result: [],
                    resultField: [],
                    resultIds: "",
                    evaluationPartId: null
                },
                questionRefs: [],
                questionDialogVisible: false,                   // 测试题对话框
                questionDialogTitle: '添加测试题',
                questionActionType: '创建',                      // '创建'  或  '编辑'
                questionRules: {
                    number: [
                        { validator: valiQuestionNumber, trigger: 'blur' }
                    ],
                    score: [
                        { validator: valiQuestionScore, trigger: 'blur' }
                    ],
                    content: [
                        { require: true, trigger: 'blur' }
                    ]
                },

                option: {
                    id: null,
                    questionId: null,
                    context: null,
                    label: null
                },
                optionDialogLabelWidth:'80px',
                optionDialogTitle: '',
                optionDialogVisible: false,
                optionActionType: '',

                optionRules: {
                    context: [
                        { type: 'string', required: true, message: '请输入选项内容', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            // 模块相关

            // 加载测试模块
            loadEvalPart() {
                let cvm = this;
                return new Promise((resolve) => {
                    axios.get(`/api/evaluation/get-eval-part?Id=${cvm.id}`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                let evalPart = res.data.data;
                                // 数据映射
                                cvm.id = evalPart.id;
                                cvm.order = evalPart.order;
                                cvm.name = evalPart.name;
                                cvm.content = evalPart.content;
                                      
                                cvm.questions = evalPart.questions;
                                cvm.evaluation = evalPart.Evaluation;
                                resolve();
                            }
                        });
                });
            },

            // 删除模块事件
            deletePart() {
                let cvm = this;
                cvm.$emit('delete-part', cvm.id)
            },

            // 修改模块事件
            editPart() {
                let cvm = this;
                cvm.$emit('edit-part', cvm.id);
            },

            // 加载模块问题集合
            loadQuestions() {
                let cvm = this;
                axios.get(`/api/evaluation/get-part-question-list?partId=${cvm.id}`)
                    .then((res) => {
                        if (res.data.code === 0) {
                            cvm.questions = res.data.data;
                        }
                    });
            },

            // 测试题相关

            // 加载单个测试题
            loadSingleQuestion(id) {
                let cvm = this;
                return new Promise((resolve) => {
                    axios.get(`/api/evaluation/get-question?id=${id}`)
                        .then((res) => {
                            let que = res.data.data;
                            cvm.question = que;
                            // 单选题
                            if (que.questionType === 0) {
                                if (que.result.length > 0) {
                                    cvm.question.resultField = que.result[0].id;
                                }
                            }
                            // 多选题
                            else if (que.questionType === 1) {
                                if (que.result.length > 0) {
                                    cvm.question.resultField = que.result.map((item) => item.id)
                                }
                            }
                            cvm.question.result = null;
                            resolve();
                        })
                })
            },

            // 打开新建测试题
            showAddQuestion() {
                let cvm = this;
                cvm.questionDialogTitle = '添加测试题';
                cvm.questionActionType = '创建';
                cvm.questionDialogVisible = true;
                cvm.question.number = cvm.generateNumer(); // 自动生成number
                cvm.question.score = 1;
                cvm.question.questionType = 0;
            },

            // 测试题组件编辑事件处理
            showEditQuestionComponent(id) {
                let cvm = this;
                ;
                cvm.loadSingleQuestion(id).then(() => {
                    cvm.questionDialogTitle = '编辑测试题';
                    cvm.questionActionType = '编辑';
                    cvm.questionDialogVisible = true;
                });
            },

            // 测试题组件'delete-question'事件处理
            deleteQuestion(id) {
                let cvm = this;
                cvm.$confirm('测试题将被删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(`/api/evaluation/delete-question?id=${id}`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                cvm.loadQuestions();
                                cvm.$message({
                                    message: res.data.msg,
                                    type: 'success',
                                    customClass: 'evaluation-message'
                                })
                            }
                            else {
                                cvm.$message({
                                    message: res.data.msg,
                                    type: 'error',
                                    customClass: 'evaluation-message'
                                });
                            }
                        });
                });
            },

            // 生成新增测试题number
            generateNumer() {
                let cvm = this;
                if (cvm.questions.length === 0) {
                    return 1;
                }
                else {
                    return cvm.questions[cvm.questions.length - 1].number + 1;
                }
            },

            // 选项相关

            // 表格，选项label映射
            optionLabel: function (value) {
                let cvm = this;
                let label;
                switch (value) {
                    case 0:
                        label = "A.";
                        break;
                    case 1:
                        label = "B.";
                        break;
                    case 2:
                        label = "C.";
                        break;
                    case 3:
                        label = "D.";
                        break;
                    case 4:
                        label = "E.";
                        break;
                    case 5:
                        label = "F.";
                        break;
                    case 6:
                        label = "G.";
                        break;
                    case 7:
                        label = "H.";
                        break;
                    case 8:
                        label = "I.";
                        break;
                    case 9:
                        label = "J.";
                        break;
                    case 19:
                        label = "K.";
                        break;
                    default:
                        break;
                }
                return label;
            },

            // 改变测试题答案(实时保存)
            resultChangeHandler(value) {
                let cvm = this;
                if (value && Number.isFinite(value)) {
                    cvm.question.resultIds = String(value);
                }
                else if (value && !Number.isFinite(value)) {
                        cvm.question.resultIds = value.join(',');
                }
                else {
                    cvm.question.resultIds = '';
                }
                axios.post(`/api/evaluation/save-quesion-result?questionId=${cvm.question.id}`, { ids: cvm.question.resultIds })
                    .then((res) => {
                        if (res.data.code === 0) {
                            cvm.loadQuestions();
                        }
                    });
            },

            // 题目类型改变事件处理
            questionTypeChangeHandler() { },

            // 保存测试题
            saveQuestion() {
                let cvm = this;
                cvm.question.evaluationPart = null;
                cvm.question.options = null;
                cvm.question.evaluationPartId = cvm.id;
                // // 结果处理   resultField--->resultIds
                // if (cvm.question.resultField) {
                //     if (typeof (cvm.question.resultField) === 'Number') {
                //         cvm.question.resultIds = String(cvm.question.resultField);
                //     }
                //     else if (typeof (cvm.question.resultField) === 'Array' && cvm.question.resultField.length>0) {
                //         cvm.question.resultIds = cvm.question.resultField.join(',');
                //     }
                //     cvm.question.result = null;
                // }
                cvm.$refs['questionForm'].validate((valid) => {
                    if (valid) {
                        axios.post(`/api/evaluation/save-question?actionType=${cvm.questionActionType}`, cvm.question)
                            .then((res) => {
                                if (res.data.code === 0) {
                                    if (cvm.questionActionType === "创建") {
                                        cvm.question.id = res.data.data;
                                        cvm.questionActionType = "编辑";
                                    }
                                    else {
                                        cvm.closeQuestion();
                                    }
                                    cvm.loadQuestions();
                                    cvm.$message({
                                        message: res.data.msg,
                                        type: 'success',
                                        customClass: 'evaluation-message'
                                    });
                                }
                                else {
                                    cvm.$message({
                                        message: res.data.msg,
                                        type: 'error',
                                        customClass: 'evaluation-message'
                                    });
                                }
                            });
                    }
                });
            },

            // 关闭问题编辑框
            closeQuestion() {
                let cvm = this;
                cvm.$refs['questionForm'].resetFields();
                cvm.questionDialogVisible = false;
                for (let key in cvm.question) {
                    cvm.question[key] = null;
                }
            },

            // table编辑选项(对话框列表)
            showEditOptionTable(index, row) {
                let cvm = this;
                cvm.loadSingleOption(row.id).then(() => {
                    cvm.optionDialogTitle = '编辑选项';
                    cvm.optionActionType = '编辑';
                    cvm.optionDialogVisible = true;
                });
            },

            // 添加选项
            showAddOptionDialog() {
                let cvm = this;
                cvm.optionDialogTitle = '创建选项';
                cvm.optionActionType = '创建';
                cvm.optionDialogVisible = true;
                cvm.generateLabel();
            },

            // 加载选项
            loadOptions() {
                let cvm = this;
                return new Promise((resolve) => {
                    axios.get(`/api/evaluation/get-question-options?questionId=${cvm.question.id}`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                cvm.question.options = res.data.data;
                                resolve();
                            }
                        })
                });
            },

            // 加载单个选项
            loadSingleOption(id) {
                let cvm = this;
                return new Promise((resolve) => {
                    axios.get(`/api/evaluation/get-option?id=${id}`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                cvm.option = res.data.data;
                                resolve();
                            }
                        });
                })
            },

            // 生成选项label
            generateLabel() {
                let cvm = this;
                return new Promise((resolve) => {
                    axios.get(`/api/evaluation/generate-label?questionId=${cvm.question.id}`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                cvm.option.label = res.data.data;
                                resolve();
                            }
                            else {
                                cvm.$message({
                                    message: res.data.msg,
                                    type: 'error',
                                    customClass: 'evaluation-message'
                                })
                            }
                        });
                });
            },

            // table删除测试题
            deleteOptionTable(index, row) {
                let cvm = this;
                cvm.$confirm('测试题选项将被删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(`/api/evaluation/delete-option?id=${row.id}`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                cvm.$message({
                                    message: res.data.msg,
                                    type: 'success',
                                    customClass: 'evaluation-message'
                                })
                                cvm.loadSingleQuestion(cvm.question.id);
                                cvm.loadQuestions();
                            }
                            else {
                                cvm.$message({
                                    message: res.data.msg,
                                    type: 'error',
                                    customClass: 'evaluation-message'
                                });
                            }
                        });
                });
            },

            // 保存选项
            saveOption() {
                let cvm = this;
                cvm.option.questionId = cvm.question.id;
                cvm.$refs['optionForm'].validate((valid) => {
                    if (valid) {
                        axios.post(`/api/evaluation/save-option`, cvm.option)
                            .then((res) => {
                                if (res.data.code === 0) {
                                    cvm.loadOptions().then(() => {
                                        cvm.loadQuestions();
                                        cvm.$message({
                                            message: res.data.msg,
                                            type: 'success',
                                            customClass: 'evaluation-message'
                                        });
                                        cvm.closeOption();
                                    })
                                }
                                else {
                                    cvm.$message({
                                        message: res.data.msg,
                                        type: 'error',
                                        customClass: 'evaluation-message'
                                    });
                                    cvm.closeOption();
                                }
                            });
                    }
                })
            },

            // 关闭选项对话框
            closeOption() {
                let cvm = this;
                cvm.$refs['optionForm'].resetFields();
                cvm.optionDialogVisible = false;
                for (let key in cvm.option) {
                    cvm.option[key] = null;
                }
            },


        },
        created() {
            let cvm = this;
            cvm.id = cvm.$attrs.id;
            // 加载
            cvm.loadEvalPart();
        }
    }

    // 根实例
    var app = new Vue({
        el: "#app",
        components: {
            'option-component': OptionComponent,
            'question-component': QuestionComponent,
            'eval-part-component': EvalPartComponent
        },
        // 根实例data
        data: {
            userType: '',  // 用户类型
            insId: '',
            actionType: '',  // 当前页面操作类型('编辑')
            mainUploadUrl: '',
            listUploadUrl: '',
            detailUploadUrl: '',
            dialogTitle: '查看图片',
            formLabelWidth: '100px',  // 标签宽度
            hostWithScheme: '',       // 主机域名（后端返回）

            // 目前编辑的测试对象
            evaluation: {
                id: null,
                name: null,
                isFree: false,
                insId: null,
                normalPrice: null,
                silverPrice: null,
                goldPrice: null,
                diamondPrice: null,
                lastTime: null,
                introduction: null,
                status: 0,
                listImage: null,
                mainImage: null,
                detailImages: null,
                takePartRuleId: null,
                EvaluationPartIDs: null
            },
            // 规则集合
            takePartRules:[],

            // 此时模块集合
            evaluationParts: [

            ],
            /*
                {
                    id: 1,
                    order: 1,
                    name: '测评模块1'
                },
                {
                    id: 2,
                    order: 3,
                    name: '测评模块2'
                }
            */
            // 当前编辑的测试模块
            evalPart: {
                id: null,
                name: null,
                order: null,
                content: null,
                evalId: null
            },
            // 当前编问题的选项集合（table data）
            options: {

            },
            // 当前编辑的选项
            option: {
                id: null,
                context: null
            },
            // 列表图片
            listImageList: [],
            // 主图（也是轮播图）
            mainImageList: [],
            // 详情图
            detailImageList: [],
            // 是否显示预览图片对话框
            imageDialogVisible: false,
            // 测试模块对话框
            partDialogVisble: false,
            partDialogTitle: '添加模块',
            partActionType: '创建',   //  '创建' 或 '编辑'
            // 选项对话框
            optionDialogVisible: false,                     // 选项对话框
            optionDialogTitle: '添加选项',
            optionActionType: '创建',                       // '创建' 或 '编辑'
            // 规则对话框
            ruleDialogTitle:'选择规则',
            ruleDialogVisble:false,

            // 预览图片url
            previewUrl: '',
            editableTabs: [{
                title: 'Tab 1',
                name: '1',
                content: 'Tab 1 content'
            }, {
                title: 'Tab 2',
                name: '2',
                content: 'Tab 2 content'
            }],  // 存储测评部位
            selectedTabName: '1',
            // 测试表单验证
            validateRules: {
                name: [
                    { required: true, message: '请输入模块名称', trigger: 'blur' }
                ]
            },
            // 模块表单验证
            partRules: {
                order: [
                    //{ validator: valiPartOrderType, tirgger: 'blur' }
                    //{ required:true,message:'请输入模块编号',trigger:'blur'},
                    { type: 'number', message: '必须为正整数', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入模块名称', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '请输入模块描述', trigger: 'blur' }
                ]
            },

            // 测试参与规则集合
            evalRules:[],
            // 当前机构参与规则集合
            insRules:[
            
            ]
            
        },
        // 根实例method
        methods: {
            back() {
                window.location.href = "/Evaluation/Index";
            },

            // 有效性改变
            isActiveChange(value) {
                let vm = this;
                axios.get(`/api/evaluation/set-eval-isActive?id=${vm.evaluation.id}&value=${value}`)
                    .then((res) => {
                        if (res.data.code) {
                            vm.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                        }
                        else { 
                            vm.$message({
                                
                            });
                        }
                    });
            },

            // 获取模块列表
            getEvalParts() {
                let vm = this;
                return new Promise(function (resolve) {
                    axios.get(`/api/evaluation/get-evaluation-parts?id=${vm.evaluation.id}`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                vm.evaluationParts = res.data.data;
                                resolve();
                            }
                            else {
                                vm.$message({
                                    message: res.data.msg,
                                    type: 'error',
                                    customClass: 'evaluation-message'
                                });
                            }
                        });
                })
            },
            // 自动生成order
            generateOrder() {
                let vm = this;

                if (vm.evaluationParts.length === 0) {
                    return 1;
                }
                else if (vm.evaluationParts.length > 0) {
                    return vm.evaluationParts[vm.evaluationParts.length - 1].order + 1;
                }
            },
            // 新建模块
            showAddEvalPart() {
                let vm = this;
                vm.evalPart.order = String(vm.generateOrder());
                vm.partDialogTitle = '新建测试模块';
                vm.partActionType = '创建';
                vm.partDialogVisble = true;
            },
            // 编辑模块
            showEditEvalPart(id) {
                let vm = this;
                vm.loadEvlPart(id)
                    .then(() => {
                        vm.partDialogTitle = '编辑测试模块';
                        vm.partActionType = '编辑';
                        vm.partDialogVisble = true;
                    })
            },
            // 加载测评模块
            loadEvlPart(id) {
                let vm = this;
                return new Promise(function (resolve) {
                    axios.get(`/api/evaluation/get-eval-part?id=${id}`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                let part = res.data.data;
                                vm.evalPart.id = id;
                                vm.evalPart.name = part.name;
                                vm.evalPart.order = part.order;
                                vm.evalPart.content = part.content;
                                vm.evalPart.evalId = part.evalId;
                                resolve();
                            }
                        });
                })
            },
            // 保存测评模块
            savePart() {
                let vm = this;
                vm.evalPart.order = parseInt(vm.evalPart.order, 10);
                vm.evalPart.evalId = vm.evaluation.id;
                
                vm.$refs['evalPartForm'].validate((valid) => {
                    if (valid) {
                        axios.post(`/api/evaluation/save-part?actionType=${vm.partActionType}`, vm.evalPart)
                            .then((res) => {
                                let id = res.data.data.id;
                                if (res.data.code === 0) {
                                    vm.$message({
                                        message: res.data.msg,
                                        type: 'success',
                                        customClass: 'evaluation-message'
                                    });
                                    vm.resetEvalPart();
                                    vm.partDialogVisble = false;
                                    vm.getEvalParts() // 重新获取 tabs
                                        .then(() => {
                                            // 设置当前选中
                                            vm.selectedTabName = String(id);
                                        })
                                }
                                else {
                                    vm.$message({
                                        message: res.data.msg,
                                        type: 'error',
                                        customClass: 'evaluation-message'
                                    });
                                }
                            });
                    }
                });
            },
            // 关闭模块对话框
            closePart() {
                let vm = this;
                vm.reSetPartForm();
                vm.setPartEmpty();
                vm.partDialogVisble = false;
            },
            // 模块置空
            setPartEmpty() {
                let vm = this;
                for (let key in vm.evalPart) {
                    vm.evalPart[key] = null;
                }
            },
            // 模块表单重置
            reSetPartForm() {
                let vm = this;
                vm.$refs['evalPartForm'].resetFields();
            },
            // 删除模块
            deletePart(partId) {
                let vm = this;
                vm.$confirm('测试模块将被删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(`/api/evaluation/delete-evaluation-part?id=${partId}`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                vm.$message({
                                    message: res.data.msg,
                                    type: 'success',
                                    customClass: 'evaluation-message'
                                });
                                vm.getEvalParts().then(() => {
                                    vm.selectedTabName = String(vm.evaluationParts[0].id);
                                });
                            }
                        });
                });

            },
            // 显示选项对话框
            showOptionDialog() {
                let that = this;
                that.optionDialogTitle = '添加选项';
                that.optionDialog = true;
            },
            // 关闭选项对话框
            closeOption() {
                let vm = this;
                vm.$refs['optionForm'].resetFields();
                vm.setOptionEmpty();
                vm.optionDialogVisible = false;
            },
            // option置空
            setOptionEmpty() {
                let vm = this;
                for (var key in vm.option) {
                    vm.option[key] = null;
                }
            },
            // 创建测试
            createEvaluation() {
                let that = this;
                return new Promise((resolve, reject) => {
                    axios.get(`/api/evaluation/create-new-evaluation`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                that.evaluation = res.data.data;
                                if (that.evaluation.listImage) {
                                    that.listImageList.push(that.evaluation.listImage);
                                }
                                if (that.evaluation.mainImage) {
                                    that.mainImageList.push(that.evaluation.mainImage);
                                }
                                if (that.detailImages && that.detailImages.length > 0) {
                                    that.detailImageList = that.detailImages;
                                }
                                resolve();
                            }
                        });
                });
            },
            // 加载"待修改"
            loadEditingEval() {
                let that = this;
                return new Promise((resolve, reject) => {
                    axios.get(`/api/evaluation/get-eval?id=${that.evaluation.id}`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                that.evaluation = res.data.data;
                                if (that.evaluation.listImage) {
                                    that.listImageList.push(that.evaluation.listImage);
                                }
                                if (that.evaluation.mainImage) {
                                    that.mainImageList.push(that.evaluation.mainImage);
                                }
                                if (that.evaluation.detailImages && that.evaluation.detailImages.length > 0) {
                                    that.detailImageList = that.evaluation.detailImages
                                }
                                resolve();
                            }
                        });
                });
            },
            // 提交测试
            submit() {
                let that = this;
                that.$refs['evalForm'].validate((valid) => {
                    if (valid) {
                        axios.post("/api/evaluation/submit", that.evaluation)
                            .then((res) => {
                                if (res.data.code === 0) {
                                    that.$message({
                                        message: res.data.msg,
                                        type: 'success',
                                        customClass: 'evaluation-message'
                                    });
                                    that.loadTableData();
                                }
                                else {
                                    that.$message({
                                        message: res.data.msg,
                                        type: 'error',
                                        customClass: 'evaluation-message'
                                    });
                                }
                            });
                    }
                })
            },
            // 保存测试
            save() {
                let vm = this;
                vm.$refs['evalForm'].validate((valid) => {
                    if (valid) {
                        axios.post("/api/evaluation/save", vm.evaluation)
                            .then((res) => {
                                if (res.data.code === 0) {
                                    vm.$message({
                                        message: res.data.msg,
                                        type: 'success',
                                        customClass: 'evaluation-message'
                                    });
                                }
                                else {
                                    vm.$message({
                                        message: res.data.msg,
                                        type: 'error',
                                        customClass: 'evaluation-message'
                                    });
                                }
                            });
                    }
                });
            },
            // 列表图片移除
            listImageRemove(file, fileList) {
                let that = this;
                axios.get(`/api/evaluation/remove-image?id=${file.id}&actionType=listImage`)
                    .then((res) => {
                        if (res.data.code === 0) {
                            that.$message({
                                message: res.data.msg,
                                type: 'success',
                                customClass: 'evaluation-message'
                            });
                        }
                        else {
                            that.$message({
                                message: res.data.msg,
                                type: 'error',
                                customClass: 'evaluation-message'
                            });
                        }
                    });
            },
            // 轮播图片移除
            mainImageRemove(file, fileList) {
                let that = this;
                axios.get(`/api/evaluation/remove-image?id=${file.id}&actionType=mainImage`)
                    .then((res) => {
                        if (res.data.code === 0) {
                            that.$message({
                                message: res.data.msg,
                                type: 'success',
                                customClass: 'evaluation-message'
                            });
                        }
                        else {
                            that.$message({
                                message: res.data.msg,
                                type: 'error',
                                customClass: 'evaluation-message'
                            });
                        }
                    });
            },
            // 详情图片移除
            detaiImagesRemove(file, fileList) {
                let that = this;
                axios.get(`/api/evaluation/remove-image?id=${file.id}&actionType=detailImages`)
                    .then((res) => {
                        if (res.data.code === 0) {
                            that.$message({
                                message: res.data.msg,
                                type: 'success',
                                customClass: 'evaluation-message'
                            });
                        }
                        else {
                            that.$message({
                                message: res.data.msg,
                                type: 'error',
                                customClass: 'evaluation-message'
                            });
                        }
                    });
            },
            // 预览图片
            handlePreview(file) {
                let that = this;
                that.imageDialogVisible = true;
                that.previewUrl = that.hostWithScheme + file.url;
            },
            // 列表图上传成功
            listImageSuccess(response, file, fileList) {
                let that = this;
                that.listImageList = [];
                that.listImageList.push(response.data)
            },
            // 主图上传成功
            mainImageSuccess(response, file, fileList) {
                let that = this;
                that.mainImageList = [];
                that.mainImageList.push(response.data);
            },
            // 详情上传成功
            detailImagesSuccess(response, file, fileList) {
                let that = this;
                that.detailImageList.push(response.data);
            },
            // 重置表单
            resetForm() { // 表单重置
                let that = this;
                that.$refs['evalForm'].resetFields();

            },
            // 重置测试模块编辑对话框表单
            resetEvalPart() {
                let that = this;
                that.$refs['evalPartForm'].resetFields();
            },
            // 设置上传组件url
            setUrl() {
                let that = this;
                that.mainUploadUrl = '/api/evaluation/upload-main-image?evalId=' + that.evaluation.id;
                that.listUploadUrl = '/api/evaluation/upload-list-image?evalId=' + that.evaluation.id;
                that.detailUploadUrl = '/api/evaluation/upload-detail-images?evalId=' + that.evaluation.id;
            },
            // 加载参与规则
            loadRules() {
                let vm = this;
                axios.get(`/api/rule/get-evaluation-rules?id=${vm.evaluation.id}`)
                    .then((res) => {
                        vm.evalRules = res.data.data;
                    });
            },
            // 加载机构规则
            loadInsRules() {
                let vm = this; 
                return new Promise(resolve => {
                    axios.get(`/api/evaluation/get-ins-rules?insId=${vm.insId}&evalId=${vm.evaluation.id}`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                vm.insRules = res.data.data;
                                resolve();
                            }
                        });
                })
            }, 
            // 打开编辑规则对话框
            selectRules() {
                let vm = this;
                vm.loadInsRules().then((res) => { 
                    vm.ruleDialogVisble = true;
                });
            },
            // 向测评添加规则
            addRuleToEval(row) {
                let vm = this;
                axios.get(`/api/evaluation/add-rule-to-eval?evalId=${vm.evaluation.id}&ruleId=${row.id}`)
                    .then((res) => {
                        if (res.data.code === 0) {
                            vm.loadInsRules();
                            vm.loadRules();
                        }
                    });
            },
            // 从测评中移除规则
            removeRuleFromEval(row) {
                let vm = this;
                axios.get(`/api/evaluation/remove-rule-from-eval?evalId=${vm.evaluation.id}&ruleId=${row.id}`)
                    .then((res) => {
                        vm.loadInsRules();
                        vm.loadRules();
                    })
            }
        },
        created() {
            let that = this;
            that.userType = @ViewBag.UserType;
            that.hostWithScheme = '@ViewBag.HostWithScheme';
            if (that.userType === 1) {
                that.insId = @ViewBag.InsId
                    that.actionType = '@ViewBag.ActionType'
                if (that.actionType == "add") {// 添加
                    that.createEvaluation()
                        .then(() => {
                            that.setUrl();
                            that.loadRules();
                        })
                }
                else if (that.actionType == 'edit') { // 编辑
                    that.evaluation.id = @ViewBag.Id
                        that.loadEditingEval()
                            .then(() => {
                                that.setUrl();
                                that.loadRules();
                                that.getEvalParts()
                                    .then(() => {
                                        if (that.evaluationParts && that.evaluationParts.length > 0) {
                                            that.selectedTabName = String(that.evaluationParts[0].id);
                                        }
                                    })
                            });
                }
            }
        },
        mounted() {
        }
    });

    // 自定义验证
    // part 自定义验证
    var valiPartOrderType = (rule, value, callback) => {
        if (!value) {
            callback(new Error('请输入排序数字'));
        };
        if (!Number.isInteger(value) || value <= 0) {
            callback(new Error('必须为大于0的正整数'));
        }
        else {
            callback();
        }
    }

    // 验证测试题编号
    var valiQuestionNumber = (rule, value, callback) => {
        if (!value) {
            callback(new Error('必须填写测试题编号'));
        };
        let val = Number(value);
        if (!Number.isInteger(val) || val <= 0) {
            callback(new Error('必须为大于0的正整数'));
        }
        else {
            callback();
        }
    }

    // 验证测试题分数
    var valiQuestionScore = (rule, value, callback) => {
        if (!value) {
            callback(new Error('分数必须填'));
        };
        let val = Number(value);
        if (!Number.isInteger(val) || val <= 0) {
            callback(new Error('必须为大于0的正整数'));
        }
        else {
            callback();
        }
    }
</script>
<style>
    /*预览容器*/
    .previewContainer {
        height: 100%;
        width: 100%;
    }

    .evaluation-message {
        margin-top: 100px;
    }

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        position: fixed;
        top: 0px;
        left:0px;
        padding: 10px;
        z-index: 9999;
        right: 20px;
        opacity: 1;
        background-color: #fff;
        box-shadow: 0px 2px 10px #888888;
    }

    .el-divider__text {
        color: #409EFF !important
    }

    .inner-container {
        padding: 15px;
        border: 1px solid #DCDFE6;
        width: 95%;
        margin-top: 10px;
    }

    .eval-parts-tabs {
        height: 750px;
        border: 1px solid #DCDFE6;
    }

    .el-tabs__content {
        height: 100% !important;
    }

        .el-tabs__content .el-tab-pane {
            height: 100% !important;
        }

            .el-tabs__content .el-tab-pane .eval-part {
                height: 100% !important;
            }

                .el-tabs__content .el-tab-pane .eval-part .part-form {
                    height: 100%;
                    display: flex !important;
                    flex-direction: column;
                }

    .el-tabs--left .el-tabs__nav.is-left {
        float: none;
        width: 200px;
        padding-top: 30px;
    }

    .el-tabs--left .el-tabs__item.is-left {
        text-align: center;
    }

    /*测试题容器*/
    .questions-container {
        padding: 10px;
        flex: 1;
        display:flex;
        flex-direction:column;
    }

        .questions-container .questions-list {
            width: 100%;
            margin-top: 10px;
            height:590px;
            overflow-y:scroll;
        }

            .questions-container .questions-list .eval-part-questions {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 5px;
            }

                .questions-container .questions-list .eval-part-questions .question-inner-container {
                    border: 1px solid #DCDFE6;
                    border-radius: 10px;
                    padding: 10px;
                }

            .questions-container .questions-list .no-question-container {
                display: flex;
                align-items: center;
                justify-content: center;
            }



    .no-evaluation-parts {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .part-title-main {
        margin-top: 15px;
        border: 1px solid #DCDFE6;
    }

    .part-title-contianer {
        padding: 10px;
    }

        .part-title-contianer .part-title {
            display: flex;      
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .part-title-contianer .part-order {
            font-size: 30px;
            position: absolute;
            left: 50px;
        }

        .part-title-contianer .part-name {
            font-size: 20px;
        }

    .part-title-main .part-content {
        padding-bottom: 10px;
        color: #909399;
        width: 100%;
        text-align: center;
        flex: 0;
    }

    .no-question-container {
        width: 100%;
        padding-top: 80px;
        text-align: center;
    }

        .no-question-container .no-question-span {
            color: #909399;
        }

    .question-content-row{
        white-space:normal;
        display:flex;
        margin-top:5px;
        color:#a6a9ad;
    }

    .quesiton-number{
        border: 1px solid #a6a9ad;
        border-radius:100%;
        font-size:20px;
        font-weight:600;
        color: #a6a9ad;
        width:35px;
        height:35px;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    /*模块组件---测试题对话框---选项*/
    .option-row {
        display: flex;
        flex-direction: column;
        border: 1px solid #DCDFE6;
        padding: 10px;
    }

        .option-row .add-option-button-container {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .option-row .table-container {
            width: 100%;
        }

    /*选项被选中的样式*/
    .optionSelected {
        border: 1px solid red;
    }

    .option-label{
      color: #a6a9ad;
    }

</style>